<!--
 * @Author: sjt
 * @Date: 2024-05-25 18:52:35
 * @LastEditors: sjt
 * @LastEditTime: 2024-10-15 21:53:52
 * @Description: file content
-->
<template>
  <div class="wrap-video" :id="videoId" ref="videoRef"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
import EZUIKit from "ezuikit-js";
import axios from "axios";
let ezvizPlayer = ref(null);
let props = defineProps(["videoId", "url"]);
let videoRef = ref();
const initPlayer = () => {
  if (ezvizPlayer.value) {
    ezvizPlayer.value.stop();
  }
  axios({
    url: "https://open.ys7.com/api/lapp/token/get",
    method: "post",
    params: {
      appKey: "053a5d8fae374276b31f28d9ead7014e",
      appSecret: "ba907eb85c4c62df5550218df5a64b96",
    },
  }).then(({ data }) => {
    let divW = document.getElementsByClassName("player-box")[0].clientWidth;
    let divH = divW / (16 / 9.6);
    console.log(document.getElementsByClassName("player-box")[0].clientWidth);
    ezvizPlayer.value = new EZUIKit.EZUIKitPlayer({
      autoplay: true, // 默认播放
      //视频播放包裹元素
      id: props.videoId,
      //萤石token
      accessToken: data.data.accessToken,
      // ezopen://open.ys7.com/${设备序列号}/{通道号}.live
      url: props.url, // 播放地址
      template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
      // header: ['capturePicture', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖
      plugin: ["talk"], // 加载插件，talk-对讲
      // 视频下方底部控件
      footer: ["hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
      audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
      width: divW,
      height: divH,
    });
  });
  // let divW = videoRef.value.clientWidth
};
onMounted(() => {});
defineExpose({
  initPlayer,
});
onUnmounted(() => {
  ezvizPlayer.value.stop();
});
</script>

<style lang="scss" scoped>
.wrap-video {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
